
<template>
    <div class="edu-page-warp">
        <div class="coursemap">
           <a @click="previewCourse" style="color:#C0C4CC" >课程分类管理</a>
            <span style="color:#C0C4CC">/</span>
            <span style="color:#909399">编辑课程分类</span>
        </div>
        <div style="margin-top:5px;margin-bottom: 20px;">
            <h2>
                {{this.title.name}} - {{this.title.trainingLevel}} - {{this.title.yearStart}}~{{this.title.yearEnd ? this.title.yearEnd : '永久'}}
            </h2>
        </div>
        <div>
            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                <el-tab-pane label="非公共选修课" name="nonPublic"></el-tab-pane>
                <el-tab-pane label="公共选修课" name="public"></el-tab-pane>
                <el-container>
                    <el-aside width="30%" style="min-height:300px;">
                        <el-row style="padding:15px 15px 15px 0;">
                            <el-col :span="18">
                                <el-input v-model="filterText" :placeholder="'快捷查询'">
                                    <!-- @keyup.enter.native="getProfessions" -->
                                    <i
                                        slot="suffix"
                                        class="el-icon-search"
                                        style="margin-top:10px;cursor:pointer"
                                    ></i>
                                </el-input>
                                <!-- @click="getProfessions" -->
                            </el-col>
                            <el-col :span="4" class="float-right" style="margin-right:15px;">
                                <el-button plain size="mini" @click="addCourseCategory()">添加</el-button>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- <div> -->
                            <el-tree
                                class="filter-tree tree"
                                :data="treeData"
                                :props="defaultProps"
                                default-expand-all
                                :filter-node-method="filterNode"
                                :highlight-current="true"
                                @node-click="nodeClick"
                                ref="tree"
                            ></el-tree>
                            <!-- </div> -->
                        </el-row>
                    </el-aside>
                    <!-- 右边内容 -->
                    <el-container>
                        <el-main>
                            <el-row>
                                <el-form
                                    ref="detailForm"
                                    :model="detailForm"
                                    label-position="right"
                                    label-width="140px"
                                >   
                                    <template v-if="labType!=1">
                                        <el-row >
                                            <div class="float-left">
                                                <div class="edu-page-title">课程性质详情</div>
                                            </div>
                                        </el-row>
                                        <el-row :gutter="20">
                                            <el-col :span="12">
                                                <el-form-item :label="'性质名称（中文）：'">
                                                    <el-input
                                                        v-model="detailForm.nameCN"
                                                        type="text"
                                                        placeholder="请输入中文名称"
                                                        style="width:100%"
                                                        maxlength="50"
                                                    />
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="20">
                                            <el-col :span="12">
                                                <el-form-item :label="'性质名称（英文）：'">
                                                    <el-input
                                                        v-model="detailForm.nameEN"
                                                        placeholder="请输入英文名称"
                                                        type="text"
                                                        style="width:100%"
                                                        maxlength="50"
                                                    />
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="20" v-if="detailForm.parentID != 0">
                                            <el-col :span="12">
                                                <el-form-item :label="'归属课程性质'+' '+'：'">
                                                    <el-select
                                                        style="width: 100%;"
                                                        v-model="detailForm.courseType"
                                                        :placeholder="'请选择课程性质'"
                                                        clearable
                                                    >
                                                        <el-option
                                                            v-for="item in options.courseType"
                                                            :key="item.id"
                                                            :label="item.label"
                                                            :value="item.id"
                                                        ></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="20" v-if="labType!=1">
                                            <el-col :span="12">
                                                <el-form-item :label="'是否认定公选课'+' '+': '">
                                                    <el-select
                                                        style="width: 100%;"
                                                        v-model="detailForm.isPublicElective"
                                                        :placeholder="'请选择课程类别'"
                                                    >
                                                        <el-option
                                                            key="1"
                                                            label="是"
                                                            value="1"
                                                        ></el-option>
                                                        <el-option
                                                            key="2"
                                                            label="否"
                                                            value="0"
                                                        ></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </template>
                                    <template v-if="labType==1">
                                        <el-row v-if="labType==1"> 
                                            <div class="float-left">
                                                <div class="edu-page-title">模块详情</div>
                                            </div>
                                        </el-row>
                                        <el-row :gutter="20">
                                            <el-col :span="12">
                                                <el-form-item :label="'模块名称（中文）：'">
                                                    <el-input
                                                        v-model="detailForm.nameCN"
                                                        type="text"
                                                        placeholder="请输入中文名称"
                                                        style="width:100%"
                                                        maxlength="50"
                                                    />
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="20" v-if="labType==1">
                                            <el-col :span="12">
                                                <el-form-item :label="'模块名称（英文）：'">
                                                    <el-input
                                                        v-model="detailForm.nameEN"
                                                        placeholder="请输入英文名称"
                                                        type="text"
                                                        style="width:100%"
                                                        maxlength="50"
                                                    />
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="20" v-if="detailForm.parentID != 0 && labType==1">
                                            <el-col :span="12">
                                                <el-form-item :label="'归属模块'+' '+'：'">
                                                    <el-select
                                                        style="width: 100%;"
                                                        v-model="detailForm.courseType"
                                                        :placeholder="'请选择归属模块'"
                                                        clearable
                                                    >
                                                        <el-option
                                                            v-for="item in options.courseType"
                                                            :key="item.id"
                                                            :label="item.label"
                                                            :value="item.id"
                                                        ></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </template>
                                </el-form>
                                
                            </el-row>
                            <!-- 课程列表 -->
                            <el-row v-if="labType==1">
                                <div class="float-left">
                                    <el-input
                                        v-model="courseName"
                                        placeholder="课程名称"
                                        prefix-icon="el-icon-search"
                                        @change="handSearchChang"
                                    />
                                </div>
                                <div class="float-right addCourseBtn">
                                    <el-button type="primary" size="mini" @click="addCourse" :disabled="!this.detailForm.id">添加课程</el-button>
                                </div>
                            </el-row>
                            <!--table -->
                            <el-table
                                :data="courseList"
                                stripe
                                size="mini"
                                v-if="labType==1"
                                tooltip-effect="light"
                                cell-class-name="normal-cell"
                            >
                                <el-table-column :label="'课程代码'" fixed="left" width="120" show-overflow-tooltip>
                                    <template slot-scope="props">{{ props.row.courseCode}}</template>
                                </el-table-column>
                                <el-table-column :label="'课程名称'" min-width="120" show-overflow-tooltip>
                                    <template slot-scope="props">{{ props.row.courseName}}</template>
                                </el-table-column>
                                <el-table-column :label="'开课学院'" min-width="125" show-overflow-tooltip>
                                    <template slot-scope="props">{{ props.row.collegeI18n}}</template>
                                </el-table-column>
                                <!-- <el-table-column :label="'课程性质'">
                                    <template slot-scope="props">{{ props.row.natureI18n}}</template>
                                </el-table-column>
                                <el-table-column :label="'考核方式'">
                                    <template slot-scope="props">{{ props.row.assessmentModeI18n }}</template>
                                </el-table-column> -->
                                <el-table-column :label="'学分'" width="55">
                                    <template slot-scope="props">{{ props.row.score}}</template>
                                </el-table-column>
                                <el-table-column :label="'学时'" width="55">
                                    <template slot-scope="props">{{ props.row.period}}</template>
                                </el-table-column>
                                <el-table-column :label="'标签'" min-width="160">
                                    <template slot-scope="props">
                                        <!-- // <el-select 
                                        // v-model="props.row.coutseTag" placeholder="请选择"
                                        // style="width:100%;overflow: hidden;"
                                        //   multiple 
                                        //  @change="coutseTagChange(props.row)">
                                        //     <el-option
                                        //         v-for="item in coutseTag"
                                        //         :key="item.value"
                                        //         :label="item.label"
                                        //         :value="item.value"
                                        //     ></el-option>
                                        // </el-select> -->
                                        <a v-if="props.row.coutseTag == ''" @click="checkTag(props.row)">
                                        请点击选择标签
                                        </a>
                                        <a v-else-if="props.row.tagName.length == 0" @click="checkTag(props.row)">
                                        请重新点击选择标签
                                        </a>
                                        <div v-else>
                                            <el-tag 
                                                v-for="(data,index) in props.row.tagName" 
                                                :key="index" 
                                                effect="dark"
                                                closable
                                                @close="checkTag(props.row)"
                                                type="info"
                                               >
                                                {{data}}
                                            </el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column :label="$t('common.text.operation')" width="60">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            size="mini"
                                            @click="showDeleteCourseCategory(scope.row)"
                                        >{{ $t('common.btn.delete') }}</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-row  v-if="labType==1">
                                <el-col>
                                    <el-pagination
                                        :current-page="pageNum_"
                                        :page-sizes="[20, 40, 80, 100]"
                                        :page-size="pageSize_"
                                        :total="total"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        style="float:right;margin-top:10px"
                                        @size-change="handleSizeChanges"
                                        @current-change="handleCurrentChanges"
                                    />
                                </el-col>
                            </el-row>
                            <!-- 添加类别-->
                            <el-dialog
                                :title="dialogTitle"
                                :visible.sync="showCourseDialog"
                                width="40%"
                                @close="resetFormValidate()"
                                :close-on-click-modal="false"
                                :close-on-press-escape="false"
                            >
                                <el-form
                                    ref="classifyForm"
                                    :model="classifyForm"
                                    :rules="courseRules"
                                    label-width="150px"
                                    label-position="right"
                                    size="mini"
                                    class="bg-white"
                                >
                                    <el-row :gutter="20">
                                        <el-col :span="20" :offset="2">
                                            <el-form-item :label="'类别名称（中文）：'" prop="name">
                                                <el-input
                                                    v-model="classifyForm.name"
                                                    type="text"
                                                    placeholder="请输入中文名称"
                                                    style="width:80%"
                                                    maxlength="50"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="20">
                                        <el-col :span="20" :offset="2">
                                            <el-form-item :label="'类别名称（英文）：'" prop="nameEN">
                                                <el-input
                                                    v-model="classifyForm.nameEN"
                                                    placeholder="请输入英文名称"
                                                    type="text"
                                                    style="width:80%"
                                                    maxlength="50"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="20">
                                        <el-col :span="20" :offset="2">
                                            <el-form-item :label="'归属课程类别'+' '+': '">
                                                <el-select
                                                    style="width: 80%;"
                                                    v-model="classifyForm.courseType"
                                                    :placeholder="'请选择课程类别'"
                                                    clearable
                                                >
                                                    <el-option
                                                        v-for="item in classifyOptions.courseType"
                                                        :key="item.id"
                                                        :label="item.label"
                                                        :value="item.id"
                                                    ></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row :gutter="20" v-if="labType!=1">
                                        <el-col :span="20" :offset="2">
                                            <el-form-item :label="'是否认定公选课'+' '+': '">
                                                <el-select
                                                    style="width: 80%;"
                                                    v-model="classifyForm.isPublicElective"
                                                    :placeholder="'请选择课程类别'"
                                                >
                                                    <el-option
                                                        key="1"
                                                        label="是"
                                                        value="1"
                                                    ></el-option>
                                                    <el-option
                                                        key="2"
                                                        label="否"
                                                        value="0"
                                                    ></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                                <el-row>
                                    <el-col :span="24">
                                        <div class="float-right">
                                            <el-button
                                                @click="cancelAddCourseLab"
                                            >{{ $t('common.btn.cancel') }}</el-button>
                                            <el-button
                                                type="primary"
                                                @click="addCourseLabs"
                                            >{{ $t('common.btn.confirm') }}</el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-dialog>
                            <!-- 添加课程 -->
                            <el-dialog
                                :title="'新增课程'"
                                :visible.sync="showAddCourseDialog"
                                width="65%"
                                :close-on-click-modal="false"
                                :close-on-press-escape="false"
                            >
                                <el-form
                                    ref="addCourseForm"
                                    :model="addCourseForm"
                                    label-width="135px"
                                    label-position="right"
                                    size="mini"
                                    class="bg-white"
                                >
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item :label="'开课学院:'" prop="college">
                                                <DictSelect
                                                    v-model="queryForm.college"
                                                    :data="options.college"
                                                    @change="getProfession(queryForm.college)"
                                                ></DictSelect>
                                            </el-form-item>
                                        </el-col>
                                         <el-col :span="12">
                                    <el-form-item :label="'课程代码/课程名称:'" prop="condition">
                                          <el-input
                                            v-model="queryForm.condition"
                                             placeholder="输入课程代码或课程名称"
                                             suffix-icon="el-icon-search"
                                            clearable
                                             @keyup.enter.native="getCondition"
                                             v-if="$store.state.language == 'cn'"
                                         />
                                          </el-form-item>                                     
                                        </el-col>  
                                    </el-row>
                                </el-form>
                                <el-table
                                    ref="multipleTable"
                                    :data="addCourseForm"
                                    stripe
                                    size="mini"
                                    @selection-change="addCourseSelectionChange"
                                >
                                    <el-table-column type="selection" width="50"></el-table-column>
                                    <el-table-column :label="'课程代码'" fixed="left" width="140">
                                        <template slot-scope="props">{{ props.row.code}}</template>
                                    </el-table-column>
                                    <el-table-column :label="'课程名称'">
                                        <template slot-scope="props">{{ props.row.name}}</template>
                                    </el-table-column>
                                    <el-table-column :label="'开课学院'">
                                        <template slot-scope="props">{{ props.row.college}}</template>
                                    </el-table-column>
                                    <el-table-column :label="'学分'" width="120">
                                        <template slot-scope="props">{{ props.row.credits}}</template>
                                    </el-table-column>
                                    <el-table-column :label="'总学时'" width="120">
                                        <template slot-scope="props">{{ props.row.period}}</template>
                                    </el-table-column>
                                </el-table>
                                <el-row>
                                    <el-col>
                                        <el-pagination
                                            :current-page="queryForm.pageNum_"
                                            :page-sizes="[20, 40, 80, 100]"
                                            :page-size="queryForm.pageSize_"
                                            :total="queryForm.total"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            style="float:right;margin-top:10px"
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                        />
                                    </el-col>
                                </el-row>
                                <el-row style="margin-top:15px;">
                                    <el-col :span="24">
                                        <div class="float-right">
                                            <el-button
                                                @click="cancelAddDialog"
                                            >{{ $t('common.btn.cancel') }}</el-button>
                                            <el-button
                                                type="primary"
                                                @click="confirmAddDialog"
                                            >{{ $t('common.btn.confirm') }}</el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-dialog>
                            <!-- 添加标签-->
                            <el-dialog
                                title="选择标签"
                                :visible.sync="showTagDialog"
                                width="40%"
                                @close="removeTag()"
                                :close-on-click-modal="false"
                                :close-on-press-escape="false"
                            >
                                <el-tree
                                    class="filter-tree tree"
                                    :data="tagData"
                                    show-checkbox
                                    :props="defaultProps"
                                    node-key="id"
                                    default-expand-all
                                    :default-checked-keys="checkedkeys"
                                    @check-change="handleCheckChange"
                                    ref="tagtree"
                                    >
                                    <!-- <span class="custom-tree-node" slot-scope="{node}">
                                        <span>{{ node.label }}</span>
                                        <span>
                                            <el-checkbox v-model="node.checked" @change="changeCheck(node)"></el-checkbox>
                                        </span>
                                    </span> -->
                                </el-tree>
                                <el-row>
                                    <el-col :span="24">
                                        <div class="float-right">
                                            <el-button
                                                @click="cancelAddTag"
                                            >{{ $t('common.btn.cancel') }}</el-button>
                                            <el-button
                                                type="primary"
                                                @click="addTag"
                                            >{{ $t('common.btn.confirm') }}</el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-dialog>
                        </el-main>
                        <el-footer>
                            <div class="float-right">
                                <el-button size="mini" @click="deleteCourseLabs">删除</el-button>
                                <!-- v-if="labType==1" -->
                                <el-button
                                    type="primary"
                                    
                                    size="mini"
                                    :disabled="!isEdit"
                                    @click="saveAll"
                                >保存</el-button>
                            </div>
                        </el-footer>
                    </el-container>
                </el-container>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import {
    findParentCourseLabel,
    addCourseLab,
    findcourseLab,
    deleteCourseLab,
    getFacultys,
    getCourseList,
    addCourseToCommonLab,
    findCommonLabCourse,
    deleteCourseToCommonLab,
    updateCommonLabLabCourse,
    findCourseTagName,
    updateCourseLab
} from "common/src/api/culture/bachelor";
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
export default {
    data() {
        return {
            lableGradeID:'',
            activeName: "nonPublic",
            showCourseDialog: false,
            showAddCourseDialog: false,
            filterText: "",
            labType: 2, //1为公共选修课，2为非公共选修课
            isEdit: false,
            multipleSelection: [],
            treeData: [],
            tagData:[],
            findTag:[],
            checkedkeys:[],
            defaultProps: {
                children: "children",
                label: "label"
            },
            detailForm: {},
            options: {
                courseType: [],
                college: [],
                coutseTag:[]
            },
            coutseTag:[],
            // 添加分类
            classifyForm: {
                nameCN: "",
                nameEN: "",
                courseType: "",
                isPublicElective:"0"
            },
            addCourseForm: [],
            classifyOptions: {
                courseType: []
            },
            courseList: [],
            queryForm: {
                college: "",
                condition: "",
                pageNum_: 1,
                pageSize_: 20,
                total: 0
            },
            courseName:"",
            pageNum_:1,
            pageSize_:20,
            total:"",
            courseRules: {
                name: [
                    {
                        required: true,
                        message: "请输入类别名称(中文)",
                        trigger: "change"
                    },
                    {
                        min: 1,
                        max: 32,
                        message: "长度在 1 到 32 个字符",
                        trigger: "change"
                    }
                ],
                nameEN: [
                    {
                        required: true,
                        message: "请输入类别名称(英文)",
                        trigger: "change"
                    }
                ]
            },
            title:{
                id:"",
                name:"",
                trainingLevel:"",
                yearStart:"",
                yearEnd:""
            },
            newId:this.$route.query.id,
            isEditCourseLab: false,
            isEditCoutseTag: false,
            showTagDialog: false,
            tagList:[]//保存更改的标签
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        // labType(newVal, oldVal){
        //     if (newVal) {
        //         this.clear();
        //         this.init();
        //         this.getCourseType();
        //     }
        // },
        newId(newVal, oldVal){
            if (newVal.length > 100) {
                this.clear();
                this.init();
            }
        },
        detailForm: {
            handler(newName, oldName) {
                if(oldName){
                    this.isEdit = true;
                    this.isEditCourseLab = true;
                }
                if (newName.id !== oldName.id) {
                    this.isEdit = false;
                }
            },
            deep: true
        }
    },
    created() {
        let bclOptionalCourse = JSON.parse(sessionStorage.getItem("bclOptionalCourse"));
        if(bclOptionalCourse){
            this.title.id = bclOptionalCourse.id;
            this.title.name = bclOptionalCourse.name;
            this.title.trainingLevel = bclOptionalCourse.trainingLevelI18n;
            this.title.yearStart = bclOptionalCourse.yearStart;
            this.title.yearEnd = bclOptionalCourse.yearEnd;
        }
        this.clear();
        this.init();
        this.findCourseTagName(bclOptionalCourse.yearStart,bclOptionalCourse.yearEnd,bclOptionalCourse.trainingLevel);
    },
    methods: {
        init() {
            this.activeName="nonPublic";
            this.labType=2;
            this.getTreeData();
            this.getFacultys();
        },
        clear(){
            this.treeData=[];
            this.courseList=[];
            this.detailForm=[]
        },
         previewCourse(){
          this.$router.push({
              path:'/bclCourseCategoryManage'
          })
      },
        // 获取左边导航内容
        getTreeData() {
            console.log('this.labType')
            let id = {
                lableGradeID: this.title.id,
                labType: this.labType
            };
            findcourseLab(id).then(res => {
                if (res.code == 200) {
                    let data = res.data.map(item => {
                        return {
                            id: item.labID,
                            lableGradeID:item.lableGradeID,
                            label:
                                "en" === this.$store.getters.language
                                    ? item.nameEN
                                    : item.nameCN,
                            nameCN: item.nameCN,
                            nameEN: item.nameEN,
                            parentID: item.parentID ? item.parentID : "0",
                            isPublicElective: item.isPublicElective?item.isPublicElective:"0"
                        };
                    });
                    this.setTree(data);
                }
            });
        },
        setTree(data) {
            let parent = data.filter(item => {
                return item.parentID == 0;
            });
            let child = data.filter(item => {
                return item.parentID > 0;
            });
            if (child.length > 0) {
                parent.forEach(par => {
                    par.children = [];
                    child.forEach(chi => {
                        if (par.id == chi.parentID) {
                            chi.courseType = chi.parentID;
                            par.children.push(chi);
                        }
                    });
                });
            }
            this.treeData = parent;
            this.options.courseType = parent;
            if (parent.length > 0) {
                this.detailForm = parent[0];
                if(this.labType=='1'){
                    this.findCommonLabCourse(this.detailForm.id);
                }
            }
        },
        findCourseTagName(startYear,endYear,trainingLevel){
            let data = {
                "startYear":startYear,
                "endYear":endYear,
                "trainingLevel":trainingLevel
            }
            findCourseTagName(data).then(res => {
                if (res.code == 200) {
                   //this.coutseTag = res.data
                   let data = res.data.map(item => {
                        return {
                            id: item.id,
                            label:
                                "en" === this.$store.getters.language
                                    ? item.nameEN
                                    : item.nameCN,
                            parentID: item.parentID,
                        };
                    });
                    // this.findTag = data.filter(item => {
                    //     return item.parentID > 0;
                    // })
                    this.findTag = data
                    this.tagData = this.setTree2(data);
                }
            });
        },
        setTree2(data) {
            let parent = data.filter(item => {
                return (item.parentID == null||item.parentID == 0);
            });
            let child = data.filter(item => {
                return item.parentID >0;
            });
            if (child.length > 0) {
                parent.forEach(par => {
                    par.children = [];
                    child.forEach(chi => {
                        if (par.id == chi.parentID) {
                            chi.courseType=chi.parentID;
                            par.children.push(chi);
                        }
                    });
                });
            }
            return parent;
        },
        handleCheckChange(data, checked, indeterminate) {
            console.log(data, checked, indeterminate);
        },
        // getCourseType() {
        //     let data = {
        //         lang: this.$store.getters.language || "cn",
        //         type: "allChild",
        //         keys: ["X_KCBQ"]
        //     };
        //     queryDic(data).then(res => {
        //         if (res.code == 200) {
        //             UTILS.fillSelect(
        //                 {
        //                     coutseTag: "X_KCBQ",
        //                 },
        //                 res.data,
        //                 this.options
        //             );
        //         }
        //     });
        // },
        // 更换公共非公共选修课页签
        handleClick(tab, event) {
            if (tab.name == "nonPublic") {
                this.labType = 2;
                this.detailForm = []
            } else {
                this.labType = 1;
                this.detailForm = []
            }
            this.filterText = ""
            this.clear();
            this.getTreeData();
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 点击查看详情
        nodeClick(data, node, tree) {
            this.detailForm = data;
            console.log(data)
            this.findCommonLabCourse(this.detailForm.id);
        },
        // 获取学院
        getFacultys() {
            getFacultys().then(res => {
                if (res.code == 200) {
                    res.data.splice(
                        res.data.findIndex(c => c.deptCode == "-10000"),
                        1
                    );
                    this.options.college = res.data;
                    this.options.college.forEach(c => {
                        c.value = c.deptCode;
                        c.label =
                            "en" == this.$store.getters.language
                                ? c.deptNameEn
                                : c.deptName;
                    });
                }
            });
        },
        handSearchChang(){
            this.findCommonLabCourse();
        },
        getCourseList() {
            // let data = {
            //     college: this.queryForm.college,
            //     condition:this.queryForm.condition,
            //     pageNum_: 1,
            //     pageSize_: 20
            // };
            getCourseList(this.queryForm).then(res => {
                if (res.code == 200) {
                    let courseList = res.data.list.map(item => {
                        return {
                            id: item.id,
                            code: item.code,
                            name: item.name,
                            nameEn: item.nameEn,
                            college: item.college,
                            credits: item.credits,
                            period: item.period
                        };
                    });
                    this.addCourseForm = courseList;
                    this.queryForm.total = res.data.total_;
                }
            });
        },
        // 处理分页大小
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.getCourseList();
        },
        // 处理分页改变
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.getCourseList(false);
        },
        // 查看课程类型下的课程
        findCommonLabCourse(id) {
            //this.labID = id
            if(id){
                this.labID = id
            }
            let data = {
                //labID:id,
                labID:this.labID,
                pageNum_: this.pageNum_,
                pageSize_: this.pageSize_,
                total: 0,
                courseName: this.courseName,
                
            }
            findCommonLabCourse(data).then(res => {
                if (res.code == 200) {
                    this.courseList =[];
                     
                    res.data.list.forEach(row =>{
                         if(row.coutseTag){
                            let coutseTag = row.coutseTag.split(",")
                            let tagName = []
                                coutseTag.forEach(d =>{
                                    this.findTag.forEach(e =>{
                                        if(d == e.id){
                                            tagName.push(e.label)
                                        }
                                    })
                                })
                                console.log(tagName)
                            row.tagName = tagName
                            row.coutseTag = coutseTag
                         }else{
                             row.coutseTag = []
                         }
                    })
                    this.courseList = res.data.list;
                    this.total = res.data.total_;
                    console.log(this.courseList)
                }
            });
        },
        // 处理分页大小
        handleSizeChanges(val) {
            this.pageSize_ = val;
            if(this.detailForm.id){
                this.findCommonLabCourse(this.detailForm.id);
            }else{
                this.findCommonLabCourse(this.labID);
            }
            
        },
        // 处理分页改变
        handleCurrentChanges(val) {
            this.pageNum_ = val;
            if(this.detailForm.id){
                this.findCommonLabCourse(this.detailForm.id);
            }else{
                this.findCommonLabCourse(this.labID);
            }
        },
        checkTag(val){
            this.checkedkeys = [];
            this.tagList = [];
            this.showTagDialog = true;
            let parms={
                "labID": val.labID,
                "courseCode": val.courseCode,
                "coutseTag": ""
            }
            if(val.tagName && val.tagName.length > 0){
                console.log(val)
                console.log(val.coutseTag)
                this.checkedkeys = val.coutseTag
                console.log(this.checkedkeys)
                this.$nextTick(() => {
                   this.$refs.tagtree.setCheckedKeys(val.coutseTag)
                });
                
            }
            this.tagList.push(parms)
        },
        removeTag(){
            this.showTagDialog = false;
            this.$refs.tagtree.setCheckedKeys([]);
        },
        cancelAddTag(){
            this.showTagDialog = false;
            this.$refs.tagtree.setCheckedKeys([]);
        },
        addTag(){
            let tagtree = this.$refs.tagtree.getCheckedKeys()
            this.tagList[0].coutseTag = tagtree.join(",")
            updateCommonLabLabCourse(this.tagList).then(res=>{
                    if(res.code==200){
                         this.$message({
                            type: "success",
                            message: "保存成功"
                        });
                        this.showTagDialog = false;
                        this.findCommonLabCourse(this.detailForm.id)
                    }
                }).catch(error=>{
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                })
                this.tagList=[];
        },
        changeCheck (node) {
            console.log('node')
            if (node.childNodes && node.childNodes.length) {
                node.childNodes.forEach(row => {
                    row.checked = node.checked;
                })
            }
            if(node.parent && node.parent.childNodes.length){
                let num = 0;
                node.parent.childNodes.forEach(row =>{
                    if(row.checked){
                        num++
                    }
                })
                if(num > 0){
                    node.parent.checked = true;
                }else{
                     node.parent.checked = false;
                }
            }
            console.log(node)

        },
        // 标签变化
        coutseTagChange(val){
            if(this.tagList.length > 0){
                let flag = true;
                this.tagList.forEach(d =>{
                    if(d.courseCode == val.courseCode){
                        flag = false;
                        d.coutseTag = val.coutseTag.join(",")
                    }
                })
                console.log("2222222222")
                console.log(this.tagList)
                if(flag){
                    let parms={
                        "labID": val.labID,
                        "courseCode": val.courseCode,
                        "coutseTag": val.coutseTag.join(",")
                    }
                    this.tagList.push(parms)
                }
                console.log("333333333333")
                console.log(this.tagList)
            }else{
                let parms={
                    "labID": val.labID,
                    "courseCode": val.courseCode,
                     "coutseTag": val.coutseTag.join(",")
                }
                this.tagList.push(parms)
                console.log("4111111111")
                console.log(this.tagList)
            }
            this.isEdit = true;
            this.isEditCoutseTag = true;
        },
        // 添加课程
        addCourse() {
            this.showAddCourseDialog = true;
            this.queryForm = {
                college: "",
                condition: "",
                pageNum_: 1,
                pageSize_: 20,
                total: 0
            }
            this.addCourseForm=[]
        },
        addCourseSelectionChange(val) {
            this.multipleSelection = val;
        },
        //提交课程
        confirmAddDialog() {
            if(this.multipleSelection.length == 0){
                this.$message({
                    type: "warning",
                    message: "请先选择要新增的课程"
                });
                return
            }
            let data = this.multipleSelection.map(item => {
                return {
                    labID: this.detailForm.id,
                    courseCode: item.code,
                    coutseTag: ""
                };
            });
            addCourseToCommonLab(data)
                .then(res => {
                    if (res.code == 200) {
                        if(res.msg==""){
                            this.$message({
                                type: "success",
                                message: "新增成功"
                            });
                        }else{         
                            this.$message({
                                type: "warning",
                                message: res.msg
                            });
                        }
                        
                        this.courseList =[];
                        this.findCommonLabCourse(this.detailForm.id);
                    }
                    this.showAddCourseDialog = false;
                })
                .catch(() => {
                    // this.$message({
                    //     type: "error",
                    //     message: "新增失败"
                    // });
                });
        },
        // 删除课程类型下的课程
        showDeleteCourseCategory(data) {
            const _this = this;
            _this
                .$confirm(
                    _this.$t("common.tips.deleteTips"),
                     "提示",
                    {
                        confirmButtonText: _this.$t("common.btn.confirm"),
                        cancelButtonText: _this.$t("common.btn.cancel"),
                        type: "warning"
                    }
                )
                .then(() => {
                    deleteCourseToCommonLab(data.labID, data.courseCode)
                    .then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: "删除成功"
                            });
                            this.findCommonLabCourse(this.detailForm.id);
                        }
                    })
                    .catch(reepr => {
                        this.$message({
                            type: "error",
                            message: "删除失败"
                        });
                    });

                })
        },
        // 根据学院搜索课程
        getProfession() {
            this.getCourseList();
        },
        getCondition() {
            this.getCourseList();
        },
        // 取消对话框课程分类
        cancelAddCourseLab() {
            this.classifyForm.courseType = "";
            this.showCourseDialog = false;
        },
        cancelAddDialog() {
            this.showAddCourseDialog = false;
            this.queryForm = {
                college: "",
                condition: "",
                pageNum_: 1,
                pageSize_: 20,
                total: 0
            }
        },
        resetFormValidate() {
            // 清除表单校验
            this.$refs.classifyForm.resetFields();
        },
        // 添加课程类别
        addCourseCategory(trainingLevel = "") {
            this.dialogTitle = "添加分类";
            this.showCourseDialog = true;
            this.getParentCourseLabel();
        },
        addCourseLabs() {
            //添加课程类别
            this.$refs.classifyForm.validate(valid => {
                if (!valid) {
                    return;
                }
                let parms;
                if(this.labType == 1){
                    parms = {
                        lableGradeID: this.$route.query.id,
                        labType: this.labType,
                        nameCN: this.classifyForm.name,
                        nameEN: this.classifyForm.nameEN
                    };
                }else{
                    parms = {
                        lableGradeID: this.$route.query.id,
                        labType: this.labType,
                        isPublicElective: this.classifyForm.isPublicElective,
                        nameCN: this.classifyForm.name,
                        nameEN: this.classifyForm.nameEN
                    };
                }
                if (this.classifyForm.courseType) {
                    parms.parentID = this.classifyForm.courseType;
                }
                addCourseLab(parms)
                    .then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: "添加成功"
                            });
                            this.classifyForm.courseType = "";
                            this.showCourseDialog = false;
                            this.getTreeData();
                        }
                    })
                    .catch(error => {
                        this.$message({
                            type: "error",
                            message: "添加失败"
                        });
                    });
            });
        },
        // 查询归属课程类别
        getParentCourseLabel() {
            let parms = {
                lableGradeID: this.$route.query.id,
                labType: this.labType
            };
            findParentCourseLabel(parms).then(res => {
                if (res.code == 200) {
                    this.classifyOptions["courseType"] = [];
                    _.each(res.data, item => {
                        this.classifyOptions["courseType"].push({
                            label:
                                "en" === this.$store.getters.language
                                    ? item.nameEN
                                    : item.nameCN,
                            id: item.labID
                        });
                    });
                }
            });
        },
        //删除课程类别
        deleteCourseLabs() {
            if(!this.detailForm.id){
                this.$message({
                    type: "warning",
                    message: "请先选择要删除的课程"
                });
                return
            }
            let parms = {
                labID: this.detailForm.id,
                labType: this.labType
            };
            const _this = this;
            _this.$confirm(
                _this.$t("common.tips.deleteTips"),
                    "提示",
                {
                    confirmButtonText: _this.$t("common.btn.confirm"),
                    cancelButtonText: _this.$t("common.btn.cancel"),
                    type: "warning"
                }
            )
            .then(() => {
                deleteCourseLab(parms)
                .then(res => {
                    if (res.code == 200) {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        });
                         this.clear();
                        this.getTreeData();
                        this.getFacultys();
                    }
                })
                .catch(error => {
                    // this.$message({
                    //     type: "error",
                    //     message: "删除失败"
                    // });
                });
            });
        },
        // 保存
        saveAll() {
            if (this.isEditCourseLab) {
                this.isEditCourseLab=false;
                if(!this.detailForm.id){
                    this.$message({
                        type: "warning",
                        message: "请先选择需要修改的课程"
                    });
                    return
                }
                let parms = {
                    labID: this.detailForm.id,
                    nameEN: this.detailForm.nameEN,
                    nameCN: this.detailForm.nameCN,
                    lableGradeID: this.detailForm.lableGradeID,
                    labType: this.labType,
                };
                if(this.detailForm.courseType){
                    parms.parentID=this.detailForm.courseType
                }
                if(this.labType != 1){
                    parms.isPublicElective = this.detailForm.isPublicElective;
                }
                updateCourseLab(parms)
                    .then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: "保存成功"
                            });
                            this.findCommonLabCourse(this.detailForm.id);
                            this.getTreeData();
                        }
                    })
                    .catch(error => {
                        this.$message({
                            type: "error",
                            message: "保存失败"
                        });
                    });
                    
            }
            // if (this.isEditCoutseTag) {
            //      this.isEditCoutseTag=false;
            //     updateCommonLabLabCourse(this.tagList).then(res=>{
            //         if(res.code==200){
            //              this.$message({
            //                 type: "success",
            //                 message: "保存成功"
            //             });
            //             this.findCommonLabCourse(this.detailForm.id)
            //         }
            //     }).catch(error=>{
            //         this.$message({
            //             type: "error",
            //             message: "保存失败"
            //         });
            //     })
            //     this.tagList=[];
               
            // }
        }
    }
};
</script>
<style scoped>
.coursemap {
    font-size: 12px;
    margin-bottom: 15px;
}
.el-tabs--border-card {
    background: #fff;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.el-aside {
    padding: 0 20px;
    color: #333;
    /* text-align: center; */
    border-right: 1px solid #cccc;
}

.el-main {
    padding: 20px;
    color: #333;
}
.el-footer {
    border-top: 1px solid #cccc;
    color: #333;
    line-height: 60px;
    text-align: right;
}
.addCourseBtn {
    margin-bottom: 15px;
}
.bluebg{
    display: inline-block;
    margin: 2px;
    padding: 4px 10px;
    color:blue;
    line-height: 1;
    vertical-align: middle;
}
.el-tag {
    margin-right: 10px;
    margin-bottom: 5px;
  }
</style>



